// ** React Imports
import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import 'echarts-liquidfill'

export default () => {
  const charRef = useRef(null)

  useEffect(() => {
    initChart()
  }, [])

  const initChart = () => {
    const chart = echarts.init(charRef.current)

    chart.setOption({
      title: {
        text: '常见不良类型',
        left: 'center',
        top: '10%',
        textStyle: {
          fontSize: 18,
          fontWeight: 'bold',
          color: '#95f3f5',
        },
      },
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 0.3, name: '衔接不良' },
            { value: 0.2, name: '表面缺陷' },
            { value: 0.2, name: '功能失效' },
            { value: 0.3, name: '规格不符' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          center: ['50%', '45%'],
          label: {
            color: '#95f3f5',
            fontWeight: 'normal',
          },
          labelLine: {
            lineStyle: {
              color: '#95f3f5',
            },
          },
        },
      ],
    })
  }
  return (
    <div className="left-two">
      <div className="box-title">成品检验情况(周)</div>
      <div
        className="box-content right-one-content"
        style={{ height: '500px' }}
      >
        <div className="category-item">
          <div className="right-one-content-item">
            <div className="value">4760</div>
            <div className="warning-bg"></div>
            <div className="subKey">优等品</div>
          </div>
          <div className="right-one-content-item">
            <div className="value">2340</div>
            <div className="warning-bg"></div>
            <div className="subKey">合格品</div>
          </div>
          <div className="right-one-content-item">
            <div className="value">612</div>
            <div className="warning-bg"></div>
            <div className="subKey">残次品</div>
          </div>
        </div>
        <div ref={charRef} style={{ height: '100%', width: '100%' }}></div>
      </div>
    </div>
  )
}
